<template>
	<view class="bg">
		<view>
			<view class="button" @tap="hitbtn()">
				<image src="/static/jiahao.png" mode="widthFix" style="width: 40px; height: 40px;"></image>
			</view>
			<view class="title">游玩计划表</view>
		</view>
		<view class="list" @tap="ontap">
			<view v-for="item in list" class="list-item" @tap="checkYouWan(item.id)">
				<view class="list-item-title">
					<view class="">
						游玩计划名称:{{ item.name }}
					</view>
					<view class="" style="font-weight: 400;color: #999;" @tap.stop="closePlan(item.id)">
						x
					</view>
				</view>
				<view class="list-item-content">创建时间:{{ item.addtime }}</view>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			userinfo: {
				userid: ''
			},
			deleteForm: {
				id: null,
			},
			delete: []
		};
	},
	onShow() {
		this.initList()
	},
	onLoad(options) {
		this.initList()
	},
	methods: {
		async confirmDelete(id) {
			console.log('id: ', id)
			this.delete.push(id)
			let res = await this.$api.del(`youwanjihua`, this.delete)
			if (res.code == 0) {
				this.initList()
			}
		},
		onDetailTap(tableName, productId) {
			console.log('Detail tap:', tableName, productId);
			// 具体的 onDetailTap 处理逻辑
		},
		closePlan(id) {
			uni.showModal({
				title: '提示',
				content: '是否删除该计划？',
				showCancel: true, // 是否显示取消按钮
				cancelText: '取消', // 取消按钮的文本内容
				confirmText: '确定', // 确定按钮的文本内容
				success: (res) => {
					if (res.confirm) {
						this.confirmDelete(id)
						console.log('用户点击确定', res);
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				},
			});
		},
		async initList() {
			this.userinfo.userid = uni.getStorageSync('userid')
			let res = await this.$api.list(`youwanjihua`, this.userinfo)
			console.log('%c [ res ]-29', 'font-size:13px; background:pink; color:#bf2c9f;', res)
			if (res.code == 0) {
				this.list = res.data.list
			}
		},
		hitbtn() {
			console.log('123')
			uni.navigateTo({
				url: '/pages/youwanjihuaform/youwanjihuaform'
			})
		},
		checkYouWan(id) {
			uni.navigateTo({
				url: `/pages/youwanjihuaxiangqing/youwanjihuaxiangqing?send=${id}`
			})
		}
	},
}
</script>

<style lang="scss">
.bg {
	width: 100vw;
	height: calc(100vh - 44px);
	background: linear-gradient(#f5f7fa 0%, #58CFA6 100%);
	position: relative;

	.button {
		width: 40px;
		height: 40px;
		background: #fff;
		border-radius: 50%;
		margin: 10px auto;
		position: absolute;
		right: 20px;
		top: 5px;
		z-index: 999;
	}
}

.title {
	text-align: center;
	font-size: 24px;
	font-weight: bold;
	color: #333;
	padding: 20px;

}

.list {
	width: 100vw;
	height: 80vh;
	margin-top: 20px;
	overflow-y: scroll;
	position: relative;


	.list-item {
		width: 90%;
		margin: 0 auto;
		background: #fff;
		border-radius: 10px;
		padding: 10px;
		margin-bottom: 10px;

		.list-item-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 16px;
			color: #333;
			font-weight: bold;
		}

		.list-item-content {
			font-size: 14px;
			color: #333;
		}
	}
}
</style>
